<template>
    <div class="a-list" ref="doms">
        <div class="a-item" :class="item.cls" :style="item.style" v-for="(item, i) in carList" :key="i" @click="ontime">
            <!-- {{ item.timestamp }} -->
            <slot name="row" :row="item" :ago="item.ago" :rowIndex="i">
                {{ item.ago }}
            </slot>
        </div>
        <JEmpty v-show="!carList.length"></JEmpty>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import JEmpty from "@/components/j-empty/index.vue";
import { formatTimeAgo, formatTimestamp } from "@/comm/format";
import { on } from "events";
// v-bind="$attrs"
type Item = {
    origin: any;
    timestamp: number;
    ago: string;
    uuid: string;
    cls: string;
    style: any;
};

const doms = ref();

const carList = ref<any[]>([]);

function ontime() {
    // console.log('time', carList.value.map(item => {
    //     return { ago: formatTimeAgo(item.timestamp), date: formatTimestamp(item.timestamp), time: item.timestamp }
    // }));
}

const props = defineProps({
    list: {
        type: Array<any>,
        default: []
    },
    max: {
        type: Number,
        default: 6
    },
    interval: {
        type: Number,
        default: 1000
    }
});

onMounted(() => {
    setInterval(() => {
        carList.value.forEach(item => {
            item.ago = formatTimeAgo(item.timestamp);
        });
    }, 1000);
});

const resetTable = (list: any[]) => {
    console.log("重置----------", list);
    carList.value.splice(0);
    carList.value.push(...list);
    topList();
};

const addList = (list: any[]) => {
    // carList.value = carList.value.concat(list);
    carList.value.push(...list);
    topList();
};

const topList = function () {
    carList.value.sort((a, b) => (a.timestamp > b.timestamp ? -1 : 1));
    carList.value.splice(20);
    // console.log('yzt___',carList);
};

defineExpose({
    stop,
    resetTable,
    addList,
    getList: () => carList
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
